import React from 'react';
import moment from 'moment';
import PropTypes from 'prop-types';
import Api from 'Utils/api';
import { message } from 'antd';
import MessageType from 'Constants/MessageType';
import { connect } from 'react-redux';
import { BROWSER_MODE } from 'Constants/webConstants';
import { RESOURCE_HOST } from '../../../constants/config';
import './index.scss';

/**
 * 组件： 建言文章页
 */
class Article extends React.PureComponent {
  static propTypes = {
    title: PropTypes.string.isRequired,
    createTime: PropTypes.string.isRequired,
  };
  constructor(props) {
    super(props);
    this.state = {
      favorState: false,
      favor: props.favor,
      speakId: undefined
    };
    this.doFavor = ::this.doFavor;
  }
  componentWillReceiveProps(nextPorp) {
    this.setState({
      favor: nextPorp.favor,
      speakId: nextPorp.speakId
    });
  }
  renderVideo(mediaType, videosrc) {
    if (mediaType === MessageType.VIDEO) {
      return (
        <video controls preload className="video">
          <source src={`${RESOURCE_HOST}${videosrc}`} type="video/mp4" />
        </video>
      );
    } else if (mediaType === MessageType.AUDIO) {
      return (
        <audio controls className="audio">
          <source src={`${RESOURCE_HOST}${videosrc}`} type="audio/mp3" />
        </audio>
      );
    }
    return '';
  }
  doFavor() {
    if (!this.state.favorState) {
      const api = new Api({
        method: 'PATCH',
        path: `/suggests/user/like/${this.state.speakId}`,
        success: () => {
          this.setState(prevState => ({
            favorState: !prevState.favorState,
            favor: prevState.favor + 1
          }));
        },
        error: (msg) => {
          message.error(msg);
        }
      });
      api.run();
    }
  }
  render() {
    const { title, videosrc, createTime, content, mediaType } = this.props;
    const { favorState, favor } = this.state;
    const { mode } = this.props;
    const isVertical = BROWSER_MODE.isVertical(mode);
    if (isVertical) {
      return (
        <div className="v-article-detail-project">
          <div className="v-article-detail-wrap">
            <div className="article-header">
              <div className="article-wrap">
                <div className="title">{title}</div>
                <div className="extra-info">
                  <span className="publish-time">{`发布时间： ${moment(createTime).format('YYYY年MM月DD日')}`}</span>
                  {favor > -1 &&
                  <span className="favor">{`赞： (${favor})`}</span>
                  }
                  {favor > -1 &&
                  <a
                    href="javascript:void(0)"
                    onClick={this.doFavor}
                    className={`favor-action ${favorState ? 'select' : ''}`}
                  >
                    {''}
                  </a>
                  }
                </div>
              </div>
            </div>
            <div className="speak-content-wrap">
              <div className="article-content">
                <div className="video-wrap">
                  {
                  videosrc && this.renderVideo(mediaType, videosrc)
                  }
                </div>
                <div className="interactive-video-content">
                  {content ? <span dangerouslySetInnerHTML={{ __html: content.replace(/\n/g, '<br/>') }} /> : ''}
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="article-detail-content-wrap">
        <div className="article-header">
          <div className="article-wrap">
            <div className="title">{title}</div>
            <div className="extra-info">
              <span className="publish-time">{`发布时间： ${moment(createTime).format('YYYY年MM月DD日')}`}</span>
              {favor > -1 &&
              <span className="favor">{`赞： (${favor})`}</span>
              }
              {favor > -1 &&
              <a
                href="javascript:void(0)"
                onClick={this.doFavor}
                className={`favor-action ${favorState ? 'select' : ''}`}
              >
                {''}
              </a>
              }
            </div>
          </div>
        </div>
        <div className="speak-content-wrap">
          <div className="article-content">
            <div className="video-wrap">
              {
                videosrc && this.renderVideo(mediaType, videosrc)
              }
            </div>
            <div className="interactive-video-content">
              {content ? <span dangerouslySetInnerHTML={{ __html: content.replace(/\n/g, '<br/>') }} /> : ''}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.webReducer
  };
}
export default connect(mapStateToProps)(Article);
